<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>管理页</title>
 <link rel="stylesheet" href="/public/layui/css/layui.css">
 <style>
  .layui-table-cell {
   height: auto;
   white-space: normal;
  }

  .layui-form-tool,
  .dfsb {
   display: flex;
   justify-content: space-between;
  }

  .layui-table img {
   width: 80px;
   height: 80px;
  }
 </style>
</head>

<body>
 <div id="head">
  <blockquote class="layui-fluid layui-form layui-elem-quote news_search margin-bottom-0 padding-5 margin-bottom-top-5">
   <form class="layui-form" action="" style="padding-top: 5px;">

    <div class="layui-row" style="padding-top: 5px;">
     <div class="layui-inline">
      <span class="layui-form-title">用户</span>
      <div class="layui-input-inline">
       <select id="sel_userId" required name="userId" lay-verify="required" lay-filter="sel_dealSortId" lay-search="">
       </select>
      </div>
     </div>
    </div>
   </form>
  </blockquote>
 </div>
 <!--工具栏-->
 <div class="padding-10 layui-form-tool">
  <div>
  </div>
  <div>
   <button id="btn_search" class="layui-btn layui-btn-normal   layui-btn-sm" style="margin-left: 0px;">
    <i class="layui-icon layui-icon-search"></i> 查询
   </button>
   <button id="btn_reset" class="layui-btn layui-btn-normal   layui-btn-sm" style="margin-left: 0px;">
    <i class="layui-icon ">&#x1002;</i> 重置
   </button>
  </div>

 </div>
 <!--显示数据列表-->
 <div class="layui-form news_list">
  <div class="layui-form news_list">
   <table id="table" lay-filter="table"></table>

  </div>
  <div id="laypage" style="position:absolute; bottom: 0px;"></div>
 </div>

 <script type="text/html" id="rowBar">
 </script>

 <script src="/public/layui/layui.js"></script>

 <script>
  layui.config({
   base: '/public/js/'
  }).use(['layer', 'form', 'jquery', 'table', 'commonLayer', 'laypage'], function () {
   var layer = layui.layer, form = layui.form, $ = layui.jquery;
   var table = layui.table;
   var commonLayer = layui.commonLayer();
   var laypage = layui.laypage
   // 查询参数
   var queryParams = {
    page: 1,
    limit: 10
   };
   var dataList = []

   let trainList = table.render({
    elem: '#table',
    noDataMsg: "未查询到相关数据",
    page: true,
    response: {
     statusName: 'code' //数据状态的字段名称，默认：code
     , statusCode: 200 //成功的状态码，默认：0
     , msgName: 'message' //状态信息的字段名称，默认：msg
     , countName: 'total' //数据总数的字段名称，默认：count
     , dataName: 'data' //数据列表的字段名称，默认：data
    },
    cols: [[
     { field: 'number', title: '序号', align: 'center', type: 'numbers' },
     {
      field: 'username', title: '用户', templet: function (d) {
       return d.userInfo && d.userInfo.length > 0 ? d.userInfo[0].username : '-';
      }
     },
     { field: 'price', title: '价格', width: 80, sort: true },
     {
      field: 'carts', title: '商品', templet: function (d) {
       let str = '';
       d.carts.forEach((c, i) => {
        str += `<div class='dfsb'><span>${c.title}</span><span>${c.num} * ${c.price}</span></div>`
       });
       return str;
      }
     },

     { field: 'createdAt', title: '创建时间' },
    ]],

   });
   const dataRender = function () {
    var tableHeight = $(window).height() - $("#head").outerHeight() - 60;
    trainList.reload({
     height: tableHeight,
     url: `/api/auth/order`,
     where: { token: sessionStorage.getItem('token'), ...queryParams }, //如果无需传递额外参数，可不加该参数
    })
   }
   dataRender()
   $('#btn_add').click(function () {
    commonLayer.openCallBackWin("添加商品", ['80%', '80%'], "./goodAdd.html");
   })
   const init = () => {
    $.ajax({
     method: 'get',
     url: `/api/auth/user`,
     data: {
      page: 1,
      limit: 1000
     },
     headers: {
      Authorization: 'Bearer ' + sessionStorage.getItem('token')
     },
     dataType: 'json',
     success: (ret) => {
      if (ret.success) {
       let str = '<option value=""></option>'
       ret.data.forEach(c => {
        str += `<option value="${c._id}">${c.username}</option>`
       })
       $('#sel_userId').html(str)
       form.render('select');
      } else {
       commonLayer.errorMsg(ret.message || '网络开了会差,请稍后再试')
      }
     }
    })
   }
   init()
   const search = function () {
    queryParams.userId = $('#sel_userId').val() || undefined
    dataRender()
   }
   $("#btn_search").click(search);

   $("#btn_reset").click(function () {
    $('#sel_userId').val('')
    search()
   });

   //重载
   window.reloadTable = function () {
    dataRender()
   }
   $(window).resize(function () {
    dataRender()
   });
  });


 </script>
</body>

</html>